<!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>花田书城，书香夹着你的花香~</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/layui/css/layui.css">
        <link rel="stylesheet" href="/css/index.css">
        <link rel="stylesheet" href="/css/animate.min.css"/>
        <link rel="Shortcut Icon" href="/img/icon/favicon.ico" type="image/x-icon" />
        <script src="/js/vue.min.js"></script>
        <script src="/js/axios.min.js"></script>
    </head>
    <body>
        <div id='nav' class="site-nav-bg">
            <div class="site-nav w1200">
              <p class="sn-back-home">
                <i class="layui-icon layui-icon-home"></i>
                <a href="/index.html">首页</a>
              </p>
              <div class="sn-quick-menu">
                <div v-show='login_status'>
                  <div style="cursor: pointer;" @click="window.location.href='/src/html/account.html'" class="login">{{user.username}}</div>
                  <div class="login"><a style="cursor: pointer;" type="button" @click="logout">退出</a></div>
                </div>
                <div v-show='!login_status'>
                  <div class="login"><a href="/src/html/login.html">登录</a></div>
                  <div class="login"><a href="/src/html/register.html">注册</a></div>
                </div>

                <div class="sp-cart"><a href="/src/html/cart.html">购物车</a><span></span></div>
              </div>
            </div>
          </div>
          <div id="header" class="header">
            <div class="headerLayout w1200">
              <div class="headerCon">
                <h1 class="mallLogo">
                  <a href="/index.html" title="花田有你，书中自然香">
                    <img style="height: 90px;" src="/img/icon/logo.png">
                  </a>
                </h1>
                <div class="mallSearch">
                  <form  class="layui-form" action="/src/html/search.html">
                    <input v-model="keyword" type="text" name="keyword" required="" lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
                    <button type="button" @click="search" style="background-color: rgba(0, 0, 0, 0.541);" class="layui-btn">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div id='content' class="w1200">
            <div class="layui-carousel" id="test1">
                <div carousel-item>
                  <div><img src="/img/ban/1.png" style="width: 100%;" /></div>
                  <div><img src="/img/ban/2.png" style="width: 100%;" /></div>
                </div>
            </div>
            <div class="layui-collapse " lay-accordion>
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">2020/05/28公告</h2>
                <div class="layui-colla-content layui-show">花田书城今日全场9折！满99元包邮~！</div>
              </div>
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">2020/05/27公告</h2>
                <div class="layui-colla-content">内容区域</div>
              </div>
              <div class="layui-colla-item">
                <h2 class="layui-colla-title">2020/05/24公告</h2>
                <div class="layui-colla-content">内容区域</div>
              </div>
            </div>
            <div class="floors animate__animated animate__fadeInUp">
                <img src="/img/icon/today.jpg">
                <div @click="goto_detail(item)"   v-for="(item, index) in recommendations" class="xx_card">
                  <img :src="item.imgurl" style="height: 200px;">
                  <h6>{{item.name}}</h6>
                  <h6 style="color: #FF5722;">折扣价：<span style="font-size: 30px;color: red;">{{item.price}}</span>元</h6>
                  <h6>分类：{{item.category}}</h6>
              </div>
            </div>
            <div class="floors layui-anim layui-anim-up">
                <ul class="xx_nav-class">
                    <li class="nav-item">
                      <div class="title" style="cursor: pointer;" @click="window.location.href='/src/html/list.html'">儿童图书</div>
                      <p><a href="#">中国</a><a href="#">外国</a><a href="#">卡通</a></p>
                      <i class="layui-icon layui-icon-right"></i>
                    </li>
                    <li class="nav-item">
                      <div class="title" style="cursor: pointer;" @click="window.location.href='/src/html/list.html'">人文社科</div>
                      <p><a href="#">历史</a><a href="#">文化</a><a href="#">古籍</a></p>
                      <i class="layui-icon layui-icon-right"></i>
                    </li>
                    <li class="nav-item" >
                      <div class="title" style="cursor: pointer;" @click="window.location.href='/src/html/list.html'">科技</div>
                      <p><a href="#">计算机</a><a href="#">物联网开发</a><a href="#">网络工程</a></p>
                      <i class="layui-icon layui-icon-right"></i>
                    </li>
                    <li class="nav-item">
                      <div class="title" style="cursor: pointer;" @click="window.location.href='/src/html/list.html'">生活</div>
                      <p><a href="#">美食</a><a href="#">旅游</a><a href="#">休闲</a></p>
                      <i class="layui-icon layui-icon-right"></i>
                    </li>
                    <li class="nav-item" style="border: none;">
                      <div class="title" style="cursor: pointer;" @click="window.location.href='/src/html/list.html'">励志</div>
                      <p><a href="#">小说</a><a href="#">人生哲学</a><a href="#">青春文学</a></p>
                      <i class="layui-icon layui-icon-right"></i>
                    </li>
                  </ul>
                  <div class="xx_floors">
                    <div  class="xx_card2">
                        <h2>热销推荐</h2>
                        <img src="/img/bookimg/2.jpg"  style="height: 280px;"/>
                    </div>
                    <div  class="xx_card2">
                        <h2>今日特惠</h2>
                        <img src="/img/ban/3.png"  style="height: 280px;"/>
                    </div>
                    <div  class="xx_card2">
                        <h2>今日满减</h2>
                        <img src="/img/ban/4.png"  style="height: 280px;"/>
                    </div>
                    <div  class="xx_card2">
                        <h2>活动预告</h2>
                        <img src="/img/ban/5.png"  style="height: 280px;"/>
                    </div>
                  </div>
            </div>
          </div>
          <div class="footer layui-anim layui-anim-up">
            <div class="ng-promise-box">
              <div class="ng-promise w1200">
                <p class="text">
                  <a  >7天无理由退换货</a>
                  <a  >满99元全场免邮</a>
                  <a  style="margin-right: 0" >100%品质保证</a>
                </p>
              </div>
            </div>
            <div class="mod_help w1200">                                     
              <p>
                <a href="javascript:;">关于我们</a>
                <span>|</span>
                <a href="javascript:;">帮助中心</a>
                <span>|</span>
                <a href="javascript:;">售后服务</a>
                <span>|</span>
                <a href="javascript:;">好书资讯</a>
                <span>|</span>
                <a href="javascript:;">关于货源</a>
              </p>
              <p class="coty">花田书城版权所有 © 2020-2025</p>
            </div>
          </div>
    </body>
    <script src="/src/js/util.js"></script>
    <script src="/src/js/index.js"></script>

    <script src="/layui/layui.all.js"></script>
    <script>
        layui.use('carousel', function(){
          var carousel = layui.carousel;
          //建造实例
          carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height:'375px'
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
          });
        });
    </script>
</html>